import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:shop/pages/home/home_page.dart';
import 'package:shop/pages/kefu/kefu_page.dart';
import 'package:shop/pages/wode/wode_page.dart';
import 'package:shop/pages/xiaoxi/xiaoxi_page.dart';

class TabPage extends StatefulWidget {
  const TabPage({super.key});

  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  int _currentIndex = 0; // 变量名更清晰

  // 导航项配置：将数据与UI分离，便于维护
  final List<TabBarItem> _tabItems = [
    TabBarItem(
      title: "首页",
      normalIcon: "assets/images/tabbar/ahouye.png",
      selectedIcon: "assets/images/tabbar/ahouye_cur.png",
      page: const HomePage(),
    ),
    TabBarItem(
      title: "客服",
      normalIcon: "assets/images/tabbar/kehu.png",
      selectedIcon: "assets/images/tabbar/kehu_cur.png",
      page: const KeFuPage(),
    ),
    TabBarItem(
      title: "我的",
      normalIcon: "assets/images/tabbar/wode.png",
      selectedIcon: "assets/images/tabbar/wode_cur.png",
      page: const WoDePage(),
    ),
    TabBarItem(
      title: "信息",
      normalIcon: "assets/images/tabbar/xiaoxi.png",
      selectedIcon: "assets/images/tabbar/xiaoxi_cur.png",
      page: const XiaoXiPage(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 底部导航栏：提取主题样式，减少嵌套
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
          splashColor: Colors.transparent, // 去除点击水波纹
          highlightColor: Colors.transparent, // 去除长按高亮
        ),
        child: BottomNavigationBar(
          items: _tabItems
              .map((item) => BottomNavigationBarItem(
            label: item.title,
            icon: _buildTabIcon(item.normalIcon),
            activeIcon: _buildTabIcon(item.selectedIcon),
          ))
              .toList(),
          type: BottomNavigationBarType.fixed, // 固定样式（防止标签过多时折叠）
          unselectedLabelStyle: TextStyle(
            fontSize: 12.sp,
            color: Colors.grey,
          ),
          selectedLabelStyle: TextStyle(
            fontSize: 14.sp,
            color: Colors.black,
          ),
          currentIndex: _currentIndex,
          onTap: (index) => setState(() => _currentIndex = index), // 简化回调
        ),
      ),
      // 页面内容：直接从配置中取页面，无需手动写列表
      body: SafeArea(
        child: IndexedStack(
          index: _currentIndex,
          children: _tabItems.map((item) => item.page).toList(),
        ),
      ),
    );
  }

  // 提取图标构建方法，避免重复代码
  Widget _buildTabIcon(String assetPath) {
    return Image.asset(
      assetPath,
      width: 32.r,
      height: 32.r,
      fit: BoxFit.contain, // 防止图片拉伸
    );
  }
}

// 定义导航项数据类：封装标题、图标、页面，数据与UI分离
class TabBarItem {
  final String title;
  final String normalIcon;
  final String selectedIcon;
  final Widget page;

  const TabBarItem({
    required this.title,
    required this.normalIcon,
    required this.selectedIcon,
    required this.page,
  });
}